<template>
  <view class="media-settings">
    <!-- 返回按钮和标题 -->
    <view class="header">
      <tn-button 
        backgroundColor="tn-bg-left" 
        style="color: black; position: absolute; left: 5%; top: 20%; width: 35px; height: 35px; font-size: 25px;" 
        :border="false"
        @click="handleReturn"
      >
        <text class="tn-icon-left"></text>
      </tn-button>
      <view class="page-title">图片视频设置</view>
    </view>

    <!-- 设置项列表 -->
    <view class="settings-container">
      <tn-list-view class="list-view" :card="true" unlined="all">
        
        <!-- 上传图片时自动压缩 -->
        <tn-list-cell title="上传图片时自动压缩">
          <switch v-model="autoCompress" @change="toggleAutoCompress"></switch>
        </tn-list-cell>

        <!-- 下载图片质量 -->
        <tn-list-cell title="下载图片质量" :arrow="true" @click="manageDownloadQuality">
          <text>{{ downloadQuality }}</text>
        </tn-list-cell>

        <!-- 视频自动播放 -->
        <tn-list-cell title="视频自动播放" :arrow="true" @click="manageAutoplay">
          <text>{{ autoPlayVideo }}</text>
        </tn-list-cell>
      </tn-list-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      autoCompress: true,  // 控制上传图片自动压缩的开关状态
      downloadQuality: '自动',  // 下载图片质量
      autoPlayVideo: '仅WiFi下开启'  // 视频自动播放选项
    };
  },
  methods: {
    // 返回上一页
    handleReturn() {
      uni.navigateBack({ delta: 1 });
    },
    // 切换上传图片自动压缩开关
    toggleAutoCompress(value) {
      this.autoCompress = value;
      uni.showToast({
        title: `上传图片自动压缩已${value ? '开启' : '关闭'}`,
        icon: 'success'
      });
    },
    // 管理下载图片质量
    manageDownloadQuality() {
      uni.navigateTo({
        url: '/pages/settings/download-quality'
      });
    },
    // 管理视频自动播放设置
    manageAutoplay() {
      uni.navigateTo({
        url: '/pages/settings/auto-play'
      });
    }
  }
};
</script>

<style scoped>
.media-settings {
  padding: 20px;
  background-color: #f5f5f5; /* 轻微灰色背景 */
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
  margin-top: 50px; /* 下移整体标题和返回按钮 */
}

.page-title {
  font-size: 30px;
  font-weight: bold;
  color: #333;
  letter-spacing: 1px;
  margin-left: 50px; /* 调整标题的左边距，与返回按钮对齐 */
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.settings-container {
  background-color: white; /* 内容区的背景色 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  margin-top: 40px;
}

.list-view {
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

tn-list-cell {
  padding: 15px 20px;
  font-size: 18px;
  color: #555;
  border-bottom: 1px solid #f1f1f1;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

tn-list-cell:last-child {
  border-bottom: none;
}

tn-list-cell:hover {
  background-color: #f0f0f0;
}

tn-list-cell:active {
  background-color: #e0e0e0;
}

.switch {
  margin-right: 20px;
}
</style>